<template>
    <div>
        <el-divider content-position="center"><span
                style="font-size: 17px;color: #0800ff;font-weight:bold">新冠疫苗管理</span>
        </el-divider>
        <div class="divstyle">
            <el-card class="box-card">
                <el-button type="danger" @click="openDialog" style="width: 300px">添加疫苗</el-button>
                <el-table stripe border :data="AllVaccine.slice((currentPage-1)*pageSize,currentPage*pageSize)">
                    <el-table-column label="疫苗ID" prop="vid" width="100" align="center"
                                     v-if="showClose"></el-table-column>
                    <el-table-column label="疫苗名称" prop="vname" align="center"></el-table-column>
                    <el-table-column label="接种时间" prop="vtime" align="center"></el-table-column>
                    <el-table-column label="接种地点" prop="vaddress" align="center"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    plain
                                    @click="OpenDeleteDialog(scope.row.vid)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="divstyle">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   small
                                   background
                                   :page-sizes="[5,10,20]" :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper" :total="AllVaccine.length">
                    </el-pagination>
                </div>
            </el-card>
        </div>


        <el-dialog title="添加疫苗" :visible.sync="dialogFormVisible" center>
            <el-form :model="Vaccine">
                <el-form-item label="疫苗名称" :label-width="formLabelWidth">
                    <el-input v-model="Vaccine.vname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="接种时间" :label-width="formLabelWidth">
                    <el-date-picker
                            v-model="Vaccine.vtime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="接种地点" :label-width="formLabelWidth">
                    <el-input v-model="Vaccine.vaddress" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addVaccine">确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog
                title="确认要删除此条信息吗？"
                :visible.sync="centerDialogVisible"
                width="30%"
                center>
            <span slot="footer" class="dialog-footer">
           <el-button @click="centerDialogVisible = false">取 消</el-button>
           <el-button type="primary" @click="deleteVaccine">确 定</el-button>
           </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "VaccineManager",
        data() {
            return {
                currentPage: 1, // 当前页码
                pageSize: 5,// 每页的数据条数
                AllVaccine: [],
                showClose: false,
                centerDialogVisible:false,
                dialogFormVisible: false,
                formLabelWidth: '120px',
                Vaccine: {
                    vname: "",
                    vtime: "",
                    vaddress: "",
                },
                vid:"",
            }
        },
        created() {
            this.getAllVaccine()
        },
        methods: {
            async getAllVaccine() {
                const {data: res} = await this.$http.get("ManagerAllVaccine");
                this.AllVaccine = res;
            },
            openDialog() {
                this.dialogFormVisible = true;
            },
            async addVaccine() {
                console.log(this.Vaccine)
                const {data: res} = await this.$http.post("addVaccine", this.Vaccine);
                this.dialogFormVisible = false;
                this.Vaccine.vname = "";
                this.Vaccine.vtime = "";
                this.Vaccine.vaddress = "";
                if (res === "ok") {
                    await this.getAllVaccine()
                    this.$message.success("添加成功")
                } else {
                    this.$message.error("添加失败")
                }
            },
            OpenDeleteDialog(row){
                this.vid = row;
                this.centerDialogVisible = true;
            },
            async deleteVaccine() {
                const {data: res} = await this.$http.get("deleteVaccine?vid=" + this.vid);
                this.centerDialogVisible = false;
                if (res === "ok") {
                    await this.getAllVaccine()
                    this.$message.success("请发公告，告知用户")
                } else {
                    this.$message.error("删除失败")
                }
            },
            /* 分页功能的实现 */
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                this.currentPage = val;
            }
        }
    }
</script>

<style scoped>
    /*分割线样式*/
    .el-divider--horizontal {
        margin: 8px 0;
        background: 0 0;
        border-top: 1px dashed #0979ea;
    }

    .divstyle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .box-card {
        width: 90%;
        height: 100%;
    }
</style>